<template>
    <h1>{{ "child" }}</h1>
    <button @click="handleClick">+2</button>
    <p>Count: {{ count }}</p>
</template>

<script lang="ts">
import { toRefs, onMounted } from "vue";
export default {
    name: "setup-child",
    // props 要在 props:[] 里声明
    props: {
        count: {
            type: Number,
            default: 0,
        },
    },
    // 字组件需通过 emits:[] 选项声明该事件。
    emits: ["changeCount"],
    setup(props, context) {
        // props 和 context 都是响应式的
        // setup 中没有 this，可以通过 context 访问
        console.log("setup", props, context);

        onMounted(() => {
            console.log("Child component onMounted parent:", context.$parent);
        });

        function handleClick() {
            context.emit("changeCount", 2);
        }

        let { count } = toRefs(props);

        return {
            count,
            handleClick,
        };
    },
    mounted() {
        // 可以在这里访问子组件的引用
        console.log("Child component mounted parent:", this.$parent);
    },
};
</script>

<style scoped></style>
